/*
 * @Author: Wilbur
 * @Date: 2019-03-21 14:29:57
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-03-22 18:45:54
 */

<template>
    <div class="container right-lsit-wrap">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="handleRoute('createRight')"
                size="small"
            >创建权益</el-button>
        </div>
        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="benefit_type.type_name"
                        show-overflow-tooltip
                        label="权益分类"
                    />
                    <el-table-column
                        fixed="left"
                        prop="benefit_name"
                        show-overflow-tooltip
                        label="权益名称"
                    />
                    <el-table-column
                        prop="benefit_price"
                        show-overflow-tooltip
                        label="权益价值"
                    />
                    <el-table-column
                        prop="benefit_price_origin"
                        show-overflow-tooltip
                        label="原价"
                    />
                    <el-table-column
                        prop="benefit_price_discount"
                        show-overflow-tooltip
                        label="会员价"
                    />
                    <el-table-column
                        prop="benefit_sort"
                        label="权益排序">
                        <template slot-scope="scope">
                            <span>{{ scope.row.benefit_sort }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="benefit_status"
                        :min-width="70"
                        label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.benefit_status == 0">未上线</span>
                            <span v-if="scope.row.benefit_status == 1">已上线</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnEditRight(scope.row.benefit_no)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:0;"
                                    @click="fnDelRight(scope.row.benefit_no)"
                                >删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 创建权益分类弹窗 -->
        <el-dialog
            :title="dialogTitle"
            width="437px"
            :visible.sync="dialogCreateRightFlag">
            <el-form
                :model="formRight"
                :rules="rulesRight"
                ref="ruleFormRight">

                <el-form-item
                    label="权益分类名称"
                    prop="name"
                    label-width="100px">
                    <el-input
                        v-model="formRight.name"
                        style="width: 270px;"/>
                </el-form-item>
                <el-form-item
                    label="分类排序"
                    prop="sort"
                    label-width="100px">
                    <el-input
                        v-model="formRight.sort"
                        type="number"
                        style="width: 270px;"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="fnResetRightForm('ruleFormRight')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnSubmitRightForm('ruleFormRight')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogTitle: '',
            dialogCreateRightFlag: false,
            formRight: {
                name: '',
                sort: ''
            },
            rulesRight: {
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请选择排序', trigger: 'blur' }
                ]
            },
            authResult: {},
            tableData: [],
            base: '',
            ticket: ''
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '权益列表'
            }
        ]);
        this.getTableData();
        this.base = this.$baseUrl;
        this.ticket = localStorage.getItem('sessionTicket');
    },
    methods: {
        fnDelRight(benefit_no) {
            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/wei4/benefit%5Cdelete', {
                    benefit_no: benefit_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        fnEditRight(benefit_no) {
            this.$router.push({name: 'createRight', query: {benefit_no: benefit_no}});
        },
        fnSubmitRightForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/wei4/hire_user%5Cset_vip', {
                        hire_no: this.hireNo,
                        append_vip_month: this.formVip.append_vip_month,
                        money: this.formVip.money
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功',
                                center: true
                            });
                            this.dialogVipFlag = false;
                            this.getTableData();
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        fnResetRightForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogCreateRightFlag = false;
        },

        /** 获取表格数据 */
        getTableData(page) {
            this.$post('/wei4/benefit%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                }
            });
        },
        /** 跳转页面 */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /** 列表渲染辅助函数：列表项为空处理 */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      margin-bottom: 0;
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
      padding: 0;
    }
    .icon-bianji {
      font-size: 14px;
      color: #b9b9b9;
      cursor: pointer;
    }
    .btn-delete {
      color: #fd4d32;
      &.is-disabled {
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
    .submit-config-item {
      display: inline-block;
      position: relative;
      padding-right: 10px;
      font-size: 14px;

      & + .submit-config-item {
        padding-left: 10px;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: 1px;
          height: 14px;
          transform: translate(0, -50%);
          background-color: #d8d8d8;
        }
      }

      .num {
        vertical-align: middle;
      }
      .iconfont {
        font-size: 16px;
        color: #b9b9b9;
        vertical-align: middle;
      }

      .icon-tupian {
        font-size: 20px;
      }
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }
  .dialog-link {
    & + .dialog-link {
      margin-top: 20px;
    }
    .link-label {
      font-weight: 500;
      margin-right: 20px;
    }
    .link-value {
    }
  }
</style>
<style lang="less">
//   .right-lsit-wrap {
//     tbody {
//       .cell {
//         display: flex;
//         align-items: center;
//         height: 48px;
//       }
//     }
//   }
  .task-list-preview-popover {
    min-width: auto !important;
    width: 120px !important;
    height: 120px;
    padding: 8px !important;
  }
  .sort-dialog {
    width: 270px !important;
  }
  .operate-dropdown{
      .el-dropdown-menu__item{
          padding-left: 0;
          padding-right: 0;
          .el-button{
              padding: 8px 20px;
              display: block;
              width: 100%;
          }
      }
  }
</style>
